<template>
  <div class="orderList zy-content">
    <div class="searchBox search-box-layout mb16">
      <Row :gutter="24">
        <Col span="4">
        <div>
          <p class="label">工装编号:</p>
          <div class="ipt">
            <Input type="text" v-model="searchParams.moldCode" :placeholder="`${$t('common.inputInfo')}`"></Input>
          </div>
        </div>
        </Col>
        <Col span="4">
        <div>
          <p class="label">工装名称:</p>
          <div class="ipt">
            <Input type="text" v-model="searchParams.moldName" :placeholder="`${$t('common.inputInfo')}`"></Input>
          </div>
        </div>
        </Col>
        <Col span="4">
        <div>
          <p class="label">维修单号:</p>
          <div class="ipt">
            <Input type="text" v-model="searchParams.repairOrderNo" :placeholder="`${$t('common.inputInfo')}`"></Input>
          </div>
        </div>
        </Col>
        <Col span="4">
        <div>
          <p class="label">维修人:</p>
          <div class="ipt">
            <Input type="text" v-model="searchParams.repairedByName" :placeholder="`${$t('common.inputInfo')}`"></Input>
          </div>
        </div>
        </Col>
        <Col span="4">
        <div>
          <p class="label">异常现象:</p>
          <div class="ipt">
            <Cascader v-model="searchParams.abnormalPhenomena" :data="abnormalList"></Cascader>
            <!-- <Select v-model="searchParams.categoryName" clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item, index) of abnormalList" :value="item" :key="index" :label="item"></Option>
            </Select> -->
          </div>
        </div>
        </Col>
        <Col span="4">
        <div>
          <p class="label">工装等级:</p>
          <div class="ipt">
            <Select v-model="searchParams.moldGrade" clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option value="A" label="A"></Option>
              <Option value="B" label="B"></Option>
              <Option value="C" label="C"></Option>
            </Select>
          </div>
        </div>
        </Col>
        <Col span="4">
        <div>
          <p class="label">维修级别:</p>
          <div class="ipt">
            <Select v-model="searchParams.urgencyLevel" clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item, index) of levels" :value="item.value" :key="index" :label="item.label"></Option>
            </Select>
          </div>
        </div>
        </Col>
        <Col span="4">
        <div>
          <p class="label hide-label">--</p>
          <div class="ipt">
            <Button class="search-btn" type="primary" @click="search">{{
              $t("common.Query")
            }}</Button>
            <Button class="reset-btn" @click="reset">{{ $t("common.reset") }}
            </Button>
          </div>
        </div>
        </Col>
        <Col span="12">
        </Col>
        <Col span="4">
        <div class="t-r">
          <p class="label hide-label">--</p>
          <div class="ipt">
            <Button class="reset-btn" style="max-width: 300px; width: auto" @click="addOrderClick">{{
              $t("fault.NewWorkOrder") }}</Button>
          </div>
        </div>
        </Col>
      </Row>
    </div>
    <div class="loading-bg" v-if="loading" @click="loadingWarning"></div>
    <!-- {{ searchParams.maintenanceStatus }} -->
    <Tabs class="tabs-layout mb16" :value="searchParams.maintenanceStatus" @on-click="onTabs" :key="tabsKey">
      <TabPane :label="label1" name="1"></TabPane>
      <TabPane :label="label2" name="2"></TabPane>
      <TabPane :label="label3" name="3"></TabPane>
      <TabPane :label="label4" name="4"></TabPane>
      <TabPane :label="label5" name="5"></TabPane>
      <TabPane :label="label6" name="6"></TabPane>
      <TabPane :label="label7" name="7"></TabPane>
      <TabPane :label="label8" name="8"></TabPane>
      <TabPane :label="label9" name="10"></TabPane>
    </Tabs>
    <div class="wrap">
      <div class="item" v-for="order in list" :key="order.id">
        <!-- <div class="item" v-for="order in list" :key="order.id"> -->
        <orderStatusIcon :status="searchParams.maintenanceStatus" />
        <div class="name">
          <div class="name-img">
            <!-- <span>{{ ['label'+searchParams.maintenanceStatus] }}123123</span> -->
          </div>
          <p>{{ order.moldCode }}</p>
          <p>{{ order.moldName }}</p>
          <!-- <p>
            {{
              order.workOrderStatus == 0 ||
              order.workOrderStatus == -1 ||
              order.workOrderStatus == 1
              ? order.maintainApplyByStr
              : order.receiveOrderByStr
            }}
            {{
              order.workOrderStatus == 0 ||
              order.workOrderStatus == -1 ||
              order.workOrderStatus == 1
              ? "（报修人）"
              : "（主要维修）"
            }}
          </p> -->
        </div>
        <div style="min-height: 26px">
          <Tag color="red">{{ order.urgencyLevel == 1 ? '特急' : order.urgencyLevel == 2 ? '紧急' : '一般' }}</Tag>
          <Tag color="blue">{{ searchParams.maintenanceStatus == '10' ? '已升级' : '未升级' }}</Tag>
          <Tag color="volcano" v-if="order.abnormalPhenomena.includes('工装异常')">工装异常</Tag>
          <Tag color="volcano" v-if="order.abnormalPhenomena.includes('品质异常')">品质异常</Tag>
          <Tag color="red">{{ order.effectProduct ? '影响生产' : '不影响生产' }}</Tag>
        </div>
        <div class="details">
          <div class="formItem">
            <!--维修单号：-->
            <div class="label">{{ $t("fault.RepairFormNumber") }}：</div>
            <div class="value num" @click="handleWorkNumDetail(order)">
              {{ order.repairOrderNo }}
            </div>
          </div>
          <div class="formItem">
            <div class="label">班组：</div>
            <div class="value">{{ order.team }}</div>
          </div>
          <div class="formItem">
            <div class="label">班次：</div>
            <div class="value">{{ order.shift }}</div>
          </div>
          <div class="formItem">
            <div class="label">具体位置：</div>
            <div class="value">{{ order.punchNumber }}</div>
          </div>
          <div class="formItem">
            <div class="label">异常现象：</div>
            <div class="value">{{ order.abnormalPhenomena }}</div>
          </div>
          <div class="formItem">
            <!--故障现象：-->
            <div class="label">异常描述：</div>
            <div class="value over-wrapper">{{ order.exceptionDescription }}</div>
          </div>
          <div class="formItem">
            <div class="label">故障时间：</div>
            <div class="value over-wrapper">{{ order.faultTime }}</div>
          </div>
          <!-- <div class="formItem" v-if="order.backupStatus">
            <div class="label">{{ $t("备件采购状态") }}：</div>
            <div class="value over-wrapper backupStatus" :class="{
              backupStatus1: order.backupStatus == 1,
              backupStatus2: order.backupStatus == 2,
              backupStatus3: order.backupStatus == 3,
            }">
              <span></span>{{ backupStatusList[order.backupStatus] }}
            </div>
          </div> -->
          <div class="preview" v-if="order.uploadAttachments && order.uploadAttachments.length">
            <Badge :count="order.uploadAttachments ? order.uploadAttachments.length : 0">
              <div class="preview-img">
                <div class="itemCol" v-for="(item, index) in order.uploadAttachments"
                  @click="previewClicjk(item, index, order.uploadAttachments)" :key="index">
                  <span class="item">
                    <template v-if="!item.filePath.includes('video')">
                      <img :src="util.filePathToUrl(item.filePath)" alt="" />
                    </template>
                    <template>
                      <video preload="auto" loop autoplay muted>
                        <source :src="util.filePathToUrl(item.filePath)" type="video/mp4" />
                      </video>
                    </template>
                  </span>
                </div>
              </div>
            </Badge>
          </div>
          <!-- 维修确认 -->
          <div class="btnF" v-if="searchParams.maintenanceStatus == '1'">
            <Button type="default" v-has="'moldServiceEdit'" class="black" ghost @click="handleEdit(order)" :loading="outLoading">
              {{ $t("编辑") }}
            </Button>
            <Button type="error" v-has="'moldServiceDel'" ghost @click="handleDeleteModal(order)">
              {{ $t("common.Delete") }}
            </Button>
            <Button class="blue" v-has="'1moldServiceConfirm'" type="primary" ghost @click="handleRepair(order.id, 'confirmFaultCodeShowF')">
              {{ $t("确认") }}
            </Button>
          </div>
          <!-- 待模修确认 -->
          <div class="btnF" v-if="searchParams.maintenanceStatus == '2'">
            <Button type="default" v-has="'1moldServiceRej'" class="black" ghost @click="handleCommonReject(order, '2', 'maintainRejectDesc')"
              :loading="outLoading">
              {{ $t("fault.Reject") }}
            </Button>
            <Button class="blue" v-has="'2moldServiceConfirm'"  type="primary" ghost @click="handleRepair(order.id, 'confirmStatu2')">
              {{ $t("确认") }}
            </Button>
          </div>
          <!-- 待品质确认 -->
          <div class="btnF" v-if="searchParams.maintenanceStatus == '3'">
            <Button type="default" v-has="'2moldServiceRej'" class="black" ghost @click="handleCommonReject(order, '3', 'MQualityRejectReason')"
              :loading="outLoading">
              {{ $t("fault.Reject") }}
            </Button>
            <Button class="blue" type="primary" ghost  v-has="'3moldServiceConfirm'"
              @click="handleCommonReject(order, '3-confirm', 'mQualityExceptionDesc', true)">
              {{ $t("确认") }}
            </Button>
          </div>
          <!-- 送修确认 -->
          <div class="btnF" v-if="searchParams.maintenanceStatus == '4'">
            <template v-if="order.productReveiveTime == null">
              <Button type="default" class="black" v-has="'moldServiceEdit'" ghost @click="handleEdit(order)" :loading="outLoading">
                {{ $t("编辑") }}
              </Button>
              <Button class="blue" type="primary" v-has="'moldServiceArrive'" ghost @click="confirm(order.id, '4-arrive')">
                确认送达
              </Button>
            </template>
            <template v-else>
              <Button type="default" class="black" v-has="'3moldServiceRej'" ghost @click="handleCommonReject(order, '3', 'MQualityRejectReason')"
                :loading="outLoading">
                {{ $t("fault.Reject") }}
              </Button>
              <Button class="blue" v-has="'moldServiceRec'" type="primary" ghost @click="confirm(order.id, '4-confirm')">
                确认收货
              </Button>
            </template>
          </div>
          <div class="btnF" v-if="searchParams.maintenanceStatus == '5'">
            <Button class="black" @click="brforeDispath(order)"  v-has="'moldServiceBrforeDispath'">
              {{ $t("fault.Allocate") }}
            </Button>
            <Button class="blue" type="primary" v-has="'moldServiceService'" ghost @click="confirm(order.id, '5')">
              接单
            </Button>
          </div>
          <div class="btnF" v-if="searchParams.maintenanceStatus == '6'">
            <Button class="black" @click="brforeDispath(order, true)" v-has="'moldServiceTrans'">
              {{ $t("fault.TransferOrder") }}
            </Button>
            <Button type="primary" class="blue" @click="handleConfirmOrder(order)" v-has="'moldServiceConfirm'">
              维修完成
            </Button>
          </div>
          <div class="btnF" v-if="searchParams.maintenanceStatus == '7'">
            <Button type="primary" class="blue" v-has="'moldServiceAccept'" @click="handleConfirmOrder(order)">
              验收
            </Button>
          </div>
          <div class="btnF" v-if="searchParams.maintenanceStatus == '10'">
            <Button class="black" @click="brforeDispath(order)" v-has="'moldServiceBrforeDispath'">
              {{ $t("fault.Allocate") }}
            </Button>
            <Button class="blue" v-has="'moldServiceService'" type="primary" ghost @click="confirm(order.id, '5')">
              接单
            </Button>
          </div>
        </div>
      </div>
    </div>
    <div class="pageWrap mt16" v-if="total > 0">
      <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
        @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
    </div>
    <!--选择单个人员-->
    <signle-member-modal ref="signleMemberModal" @handleRefresh="handleRefresh" />

    <!--确认提醒-->
    <!--        <order-detail-modal ref="orderDetailModal" @handleRefresh="handleRefresh"/>-->
    <AddModal ref="addModal" @refresh="handleRefresh" @handleRecive="handleRecive" @handleDispath="handleDispath" />
    <!-- 待生产确认 -->
    <Modal :mask-closable="false" class="modal-title-layout" v-model="confirmFaultCodeShowF" :title="`${$t('fault.Confirmremind')}`">
      <Form ref="statu1Form" :model="statu1Form" label-position="top">
        <FormItem label="是否自行维修完成" prop="isRepairMyself" :rules="{ required: true, message: '请选择' }">
          <RadioGroup v-model="statu1Form.isRepairMyself">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="拆模类型" prop="demoldingType" v-if="statu1Form.isRepairMyself == 0"
          :rules="{ required: true, message: '请选择拆模类型', trigger: 'change' }">
          <Select v-model="statu1Form.demoldingType" clearable @on-change="teamChange"
            :placeholder="`${$t('common.selectInfo')}`">
            <Option v-for="( item, index ) of  demoList " :value="item.value" :key="index">{{
              item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="维修方法" prop="repairWay" v-if="statu1Form.isRepairMyself == 1"
          :rules="{ required: true, message: '请输入维修方法', trigger: 'blur' }">
          <Input v-model="statu1Form.repairWay" :placeholder="`${$t('common.inputInfo')}维修方法`" clearable />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="confirmFaultCodeShowF = false">{{
          $t("common.Cancle")
        }}</Button>
        <Button type="primary" :loading="repairLoading"
          @click="commonConfirm('statu1Form', 'statu1Form', '1', 'confirmFaultCodeShowF')">{{ $t("maintenance.Confirmed")
          }}
        </Button>
      </div>
    </Modal>
    <!--待模修确认 -->
    <Modal :mask-closable="false" class="modal-title-layout" v-model="confirmStatu2" :title="`${$t('fault.Confirmremind')}`">
      <Form ref="statu2Form" :model="statu2Form" label-position="top">
        <FormItem label="是否现场维修完成" prop="isRepairMyself" :rules="{ required: true, message: '请选择' }">
          <RadioGroup v-model="statu2Form.isRepairMyself">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="工装异常情况描述" prop="moldExceptionDesc" v-if="statu2Form.isRepairMyself == 0"
          :rules="{ required: false, message: '工装异常情况描述', trigger: 'blur' }">
          <Input type="textarea" v-model="statu2Form.moldExceptionDesc" :placeholder="`${$t('common.inputInfo')}工装异常情况描述`"
            clearable />
        </FormItem>
        <FormItem label="维修方法" prop="repairWay" v-if="statu2Form.isRepairMyself == 1"
          :rules="{ required: true, message: '请输入维修方法', trigger: 'blur' }">
          <Input v-model="statu2Form.repairWay" :placeholder="`${$t('common.inputInfo')}维修方法`" clearable />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="confirmStatu2 = false">{{
          $t("common.Cancle")
        }}</Button>
        <Button type="primary" :loading="repairLoading"
          @click="commonConfirm('statu2Form', 'statu2Form', '2', 'confirmStatu2')">{{ $t("maintenance.Confirmed") }}
        </Button>
      </div>
    </Modal>
    <!--驳回提醒-->
    <Modal :mask-closable="false" v-model="backFaultCodeShowF" class="modal-title-layout" :title="`${$t('fault.ConfiRejected')}`">
      <div class="icon red">
        <i class="iconfont zy-common-shibai1"></i>
      </div>
      <p class="title">
        <span>{{ $t("common.Pleasereject") }}</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="backFaultCodeShowF = false">{{
          $t("common.Cancle")
        }}</Button>
        <Button type="primary" :loading="backLoading" @click="handleConfirmOk(-1)">{{ $t("maintenance.Confirmed") }}
        </Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" class="modal-title-layout" v-model="deleteShow" :title="`${$t('common.Delete')}`">
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>{{ $t("common.confirmDelete") }}</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="deleteShow = false">{{
          $t("common.Cancle")
        }}</Button>
        <Button type="primary" :loading="repairLoading" @click="handleDelete">{{ $t("maintenance.Confirmed") }}
        </Button>
      </div>
    </Modal>
    <gallery :images="galleryImagesList" :index="galleryIndexInfo" @close="galleryIndexInfo = null"></gallery>
    <inputModal ref="inputModal"></inputModal>
    <commonModal ref="commonModal"></commonModal>
  </div>
</template>

<script>
// import orderDetailModal from './modules/orderDetailModal'
import { getAbnormalPhenomenaList } from "@/api/moldManagement/abnormalPhenomenaList.js";
import commonModal from "@/components/modalTypes/commonModal.vue";
import inputModal from "@/components/modalTypes/inputModal.vue";
import recursion from "@/util/recursion";
import VueGallery from "vue-gallery";
import AddModal from "./modules/addModal";
import orderStatusIcon from "./modules/orderStatusIcon";
import SignleMemberModal from "./modules/signleMemberModal";

export default {
  name: "orderList",
  components: {
    AddModal,
    SignleMemberModal,
    // orderDetailModal,
    gallery: VueGallery,
    orderStatusIcon,
    inputModal,
    commonModal,
  },
  data() {
    return {
      levels: [
        { label: "特急", value: '1' },
        { label: "紧急", value: '2' },
        { label: "一般", value: '3' },
      ],
      abnormalList: getAbnormalPhenomenaList(),
      backupStatusList: {
        1: this.$t("待采购"),
        2: this.$t("采购中"),
        3: this.$t("已到货"),
      },
      deleteShow: false,
      loading: false,
      galleryIndexInfo: null,
      galleryImagesList: [],
      detailId: "",
      repairId: "",
      total: 0,
      pageNum: 1,
      pageSize: 10,
      labelCount1: 0,
      labelCount2: 0,
      labelCount3: 0,
      labelCount4: 0,
      labelCount5: 0,
      labelCount6: 0,
      labelCount7: 0,
      labelCount8: 0,
      labelCount9: 0,
      label1: (h) => {
        return h("div", [
          h("span", "维修确认"),
          h("Badge", {
            props: {
              count: this.labelCount1,
            },
          }),
        ]);
      },
      label2: (h) => {
        return h("div", [
          h("span", "待模修确认"),
          h("Badge", {
            props: {
              count: this.labelCount2,
            },
          }),
        ]);
      },
      label3: (h) => {
        return h("div", [
          h("span", "待品质确认"),
          h("Badge", {
            props: {
              count: this.labelCount3,
            },
          }),
        ]);
      },
      label4: (h) => {
        return h("div", [
          h("span", "送修确认"),
          h("Badge", {
            props: {
              count: this.labelCount4,
            },
          }),
        ]);
      },
      label5: (h) => {
        return h("div", [
          h("span", "待分配"),
          h("Badge", {
            props: {
              count: this.labelCount5,
            },
          }),
        ]);
      },
      label6: (h) => {
        return h("div", [
          h("span", "维修中"),
          h("Badge", {
            props: {
              count: this.labelCount6,
            },
          }),
        ]);
      },
      label7: (h) => {
        return h("div", [
          h("span", "待验收"),
          h("Badge", {
            props: {
              count: this.labelCount7,
            },
          }),
        ]);
      },
      label8: (h) => {
        return h("div", [
          h("span", "已结单"),
          h("Badge", {
            props: {
              count: this.labelCount8,
            },
          }),
        ]);
      },
      label9: (h) => {
        return h("div", [
          h("span", "升级中"),
          h("Badge", {
            props: {
              count: this.labelCount10,
            },
          }),
        ]);
      },
      confirmFaultCodeShowF: false,
      confirmStatu2: false,
      repairLoading: false,
      outLoading: false,
      backFaultCodeShowF: false,
      backLoading: false,
      searchParams: {
        maintenanceStatus: "1",
      },
      orgList: [],
      deviceList: ["A", "B", "C"],
      list: [],
      companyList: [], // 所属公司data
      tabsKey: 0,
      tabKey: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      isOutReject: false,
      lineList: [],
      isRepairReject: false,
      lineType: 999,

      statu1Form: {},
      statu2Form: {},
      demoList: [
        { label: '试模NG', value: "1" },
        { label: '异常发生', value: "2" },
        { label: '冲次满保养', value: "3" },
        { label: '生产需要且完成任务', value: "4" }
      ]
    };
  },
  created() {
    let status = sessionStorage.getItem("moldRepairStatus");
    if (status) {
      this.onTabs(status)
      // this.searchParams.status = status
      sessionStorage.removeItem("moldRepairStatus");
      // this.$
    } else {
      status = 0;
    }
    // this.tabsKey++

    this.$nextTick(() => {
      document
        .getElementsByClassName("ivu-tabs-tab")
      [this.tabKey.indexOf(status / 1)].click();
    });

    this.getCountsList()
    this.getFactory();
    this.getCompanyList();
    this.getOrgList();
    this.getList()
  },
  watch: {
    lineType: function (val) {
      const _list = this.lineList.filter(
        (item) => item.id == val || val == 999
      );
      this.searchParams.orgCode = val == 999 ? [] : [_list[0].id];
      this.orgList = _list;
      this.search();
    },
  },
  mounted() {

  },
  methods: {
    confirm(id, status) {
      let url, desc, title;
      if (status == '4-arrive') {
        url = '/dms/moldMaintenanceHall/productReveiveConfirm';
        desc = '确认已将工装送达指定维修地点！';
        title = '送达提醒';
      } else if (status == '4-confirm') {
        url = '/dms/moldMaintenanceHall/repairReveiveConfirm';
        desc = '确认已收到工装，并开始进行维修！';
        title = '收货提醒';
      } else if (status == '5') {
        url = '/dms/moldMaintenanceHall/receive';
        desc = '是否接单请确认!';
        title = '接单提醒';
      }
      this.$refs.commonModal.showModal({
        title: title || "确认",
        type: "sure",
        desc,
        submit: () => {
          this.axios({
            method: "post",
            url,
            data: { id },
          }).then((res) => {
            if (res.code === 200) {
              this.$Message.success(res.msg);
              this.search();
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          });
        },
      });
    },
    commonConfirm(formName, data, status, dialogName) {
      let url;
      if (status == '1') {
        url = '/dms/moldMaintenanceHall/productConfirm'
      } else if (status == '2') {
        url = '/dms/moldMaintenanceHall/repairConfirm'
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios({
            method: "post",
            url,
            data: {
              ...this[data],
              id: this.repairId,
            },
          }).then((res) => {
            if (res.code === 200) {
              this[dialogName] = false;
              this.$Message.success(res.msg);
              this.search();
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          });
        }
      })
    },
    // 公用驳回
    handleCommonReject(order, status, key, type) {
      let url, desc, required = true;
      let data = {};
      if (status == '2') {
        url = '/dms/moldMaintenanceHall/repairReject';
        desc = '工装异常情况描述';
      } else if (status == '3') {
        url = '/dms/moldMaintenanceHall/mQualityReject';
        desc = '驳回原因';
      } else if (status == '3-confirm') {
        url = '/dms/moldMaintenanceHall/mQualityConfirm';
        desc = '品质异常情况描述';
        if (order.abnormalPhenomena.includes('品质异常')) {
          required = true;
        } else required = false;
      }
      this.$refs.inputModal.showModal({
        title: type ? "确认" : "驳回",
        desc,
        required,
        submit: (form) => {
          data[key] = form.value
          this.axios({
            method: "post",
            url,
            data: { id: order.id, ...data },
          }).then((res) => {
            if (res.code === 200) {
              this.$Message.success(res.msg);
              this.search();
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          });
        },
      });
    },
    getFactory() {
      this.axios({
        method: "get",
        url: "/basic/organization/findListByToken",
        params: { level: 3 },
      }).then((res) => {
        if (res.code === 200) {
          const obj = { label: "name", value: "id", children: "children" };
          let list = recursion.convertTree(res.data, obj);

          list.unshift({
            name: this.$t("全部"),
            id: 999,
            children: [],
          });
          this.lineList = list;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    previewClicjk(item, index, arr) {
      this.galleryIndexInfo = index;
      // let arr = this.order.attachmentDTOs1
      this.galleryImagesList = arr.map((val) => {
        if (val.filePath.includes("video")) {
          val.filetype = "video/mp4";
        }
        if (val.filePath.includes("jpg")) {
          val.filetype = "image/jpeg";
        }
        return {
          type: val.filetype,
          href: this.util.filePathToUrl(val.filePath),
        };
      });
    },
    /**************基础数据**********************/
    getOrgList() {
      this.axios({
        method: "get",
        url: "/basic/organization/findListByToken",
        params: { level: 3 },
      }).then((res) => {
        if (res.code === 200) {
          const obj = {
            label: "name",
            value: "id",
            children: "children",
          };
          this.orgList = recursion.convertTree(res.data, obj);
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getCompanyList() {
      this.axios({
        method: "get",
        url: "/basic/company/getCompanyListByUser",
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          this.companyList = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getCountsList() {
      let params = {};
      if (this.lineType != 999) params.orgId = this.lineType;
      this.axios({
        method: "get",
        url: "/dms/moldMaintenanceHall/orderStatusCount",
        params: { ...params },
      }).then((res) => {
        if (res.code === 200) {
          let obj = res.data;
          this.labelCount1 = 0;
          this.labelCount2 = 0;
          this.labelCount3 = 0;
          this.labelCount4 = 0;
          this.labelCount5 = 0;
          this.labelCount6 = 0;
          this.labelCount7 = 0;
          this.labelCount8 = 0;
          this.labelCount9 = 0;
          this.labelCount10 = 0;
          this.labelCount11 = 0;
          if (Reflect.has(obj, 1)) {
            this.labelCount1 = obj[1];
          }
          if (Reflect.has(obj, 11)) {
            this.labelCount2 = obj[11];
          }
          if (Reflect.has(obj, 12)) {
            this.labelCount3 = obj[12];
          }
          if (Reflect.has(obj, 4)) {
            this.labelCount4 = obj[4];
          }
          if (Reflect.has(obj, 5)) {
            this.labelCount5 = obj[5];
          }
          if (Reflect.has(obj, 6)) {
            this.labelCount6 = obj[6];
          }
          if (Reflect.has(obj, 7)) {
            this.labelCount7 = obj[7];
          }
          if (Reflect.has(obj, 8)) {
            this.labelCount8 = obj[8];
          }
          if (Reflect.has(obj, 9)) {
            this.labelCount9 = obj[9];
          }
          if (Reflect.has(obj, 10)) {
            this.labelCount10 = obj[10] || 0;
          }
         
          this.$forceUpdate();
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //新增工单
    addOrderClick() {
      this.$refs.addModal.show();
    },
    //刷新
    handleRefresh() {
      this.getList();
      // this.search();
      this.getCountsList();
    },
    brforeDispath(order, status) {
      if (order.workOrderSource === 1) {
        this.beforeRevice(order, status);
      } else {
        this.handleDispath(order, status);
      }
    },
    //分配
    handleDispath(order, status) {
      this.$refs.signleMemberModal.show(order, status);
    },
    //详情
    handleWorkNumDetail(order) {
      // this.$refs.orderDetailModal.show(order.id, this.searchParams.status)
      this.$router.push({
        path: "/moldManagement/moldRepairDetail",
        query: {
          id: order.id,
          status: this.searchParams.maintenanceStatus,
          type: 'view',
        },
      });
    },
    async beforeRevice(order, target) {
      if (order.workOrderSource === 1) {
        // const _checkDeviceStatus = await this.checkDeviceStatus(order.deviceMId)
        // if (_checkDeviceStatus){
        //   this.$refs.commonModal.showModal({
        //     type: "warn",
        //     desc: this.$t('已存在未完工的维修单，是否确认继续接单？'),
        //     submit: () => {
        //       this.$refs.addModal.open(order, target || 'receive', this.$t('填写设备'));
        //     }
        //   })
        // }else{
        this.$refs.addModal.open(
          order,
          target || "receive",
          this.$t("填写设备")
        );
        // }
      } else {
        this.handleRecive(order, target);
      }
    },
    checkDeviceStatus(deviceMId) {
      return new Promise((resolve) => {
        this.axios({
          method: "get",
          url: "/dms/workOrder/checkDeviceInRepair",
          params: {
            deviceMId,
          },
        }).then((res) => {
          if (res.code === 200) {
            resolve(res.data);
          }
        });
      });
    },
    //接
    handleRecive(order, deviceMId) {
      let params = {
        workOrderId: order.id,
        userId: window.localStorage.getItem("ziyunFactoryUserId"),
        workOrderStatus: order.workOrderStatus,
        platform: 1,
      };

      if (deviceMId) {
        params["deviceMId"] = deviceMId;
      }

      this.axios({
        method: "get",
        url: "/dms/workOrder/receiveOrDistribution",
        params: params,
      })
        .then((res) => {
          if (res.code === 200) {
            this.$Message.success({
              content: `${this.$t("common.OrderSuce")}`,
              duration: 6,
              closable: true,
            });
            this.$router.push({
              path: "/fault/statement/workOrderDetail",
              query: {
                id: order.id,
                status: 2,
              },
            });
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        })
        .finally(() => {
          // this.$refs.orderDetailModal.show(order.id, '2')
          // const userId = localStorage.getItem('ziyunFactoryUserId')
        });
    },
    // 确认查看详情
    handleConfirmOrder(order) {
      // this.$refs.orderDetailModal.show(order.id, this.searchParams.status)
      // const userId = localStorage.getItem('ziyunFactoryUserId')
      this.$router.push({
        path: "/moldManagement/moldRepairDetail",
        query: {
          id: order.id,
          status: this.searchParams.maintenanceStatus,
        },
      });
    },
    // 确定工单进入工单大厅
    handleConfirmOk(type) {
      this.repairLoading = true;
      let ajaxParams = {};
      if (this.isOutReject) {
        ajaxParams = {
          url: "/dms/workOrder/outsourcingToConfirm",
          data: { dmsMaintainId: this.repairId, reject: true },
          method: "post",
        };
      } else if (this.isRepairReject) {
        ajaxParams = {
          url: "/dms/workOrder/rollbackToFaultVerification",
          params: { workOrderId: this.repairId },
          method: "get",
        };
      } else {
        ajaxParams = {
          url: "/dms/workOrder/passOrRefuse",
          params: { id: this.repairId, type: type },
          method: "get",
        };
      }
      this.axios({
        ...ajaxParams,
      })
        .then((res) => {
          if (res.code === 200) {
            this.$Message.success({
              content: `${type === 1 ? "维修确认" : "驳回"}成功！`,
              duration: 6,
              closable: true,
            });
            this.getList();
            this.getCountsList();
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        })
        .finally(() => {
          this.repairLoading = false;
          this.confirmFaultCodeShowF = false;
          this.backFaultCodeShowF = false;
          this.isRepairReject = false;
        });
    },
    //删除
    handleDeleteModal(item) {
      this.deleteShow = true;
      this.detailId = item.id;
    },
    handleDelete() {
      this.axios({
        method: "post",
        url: "/dms/moldMaintenanceHall/delete",
        data: {
          id: this.detailId,
        },
      })
        .then((res) => {
          if (res.code === 200) {
            this.$Message.success({
              content: "删除成功",
              duration: 6,
              closable: true,
            });
            this.deleteShow = false;
            this.detailId = "";
            this.getList();
            this.getCountsList();
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        })
        .finally(() => {
          this.repairLoading = false;
          this.confirmFaultCodeShowF = false;
          this.backFaultCodeShowF = false;
        });
    },
    //维修
    handleRepair(id, dialogName) {
      this[dialogName] = true;
      this.repairId = id;
    },
    //驳回
    handleOutsourcingReject(id) {
      this.isOutReject = true;
      this.backFaultCodeShowF = true;
      this.repairId = id;
    },
    handleRepairOutsourcingReject(id) {
      this.isRepairReject = true;
      this.backFaultCodeShowF = true;
      this.repairId = id;
    },
    handleEdit(order) {
      this.$refs.addModal.edit(order, "edit", this.$t("编辑工单"));
    },
    //驳回
    handleOut(id) {
      this.isOutReject = false;
      this.backFaultCodeShowF = true;
      this.repairId = id;
    },
    changePageSize(val) {
      this.pageSize = val;
      this.getList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.getList();
    },
    reset() {
      let maintenanceStatus = this.searchParams.maintenanceStatus;
      this.searchParams = {
        maintenanceStatus: maintenanceStatus,
      };
      this.search();
    },
    search() {
      this.list = [];
      this.getList();
      this.getCountsList();
    },
    getList() {
      let status = this.searchParams.maintenanceStatus;
      let params = {
        ...this.searchParams,
        // orderStatus: [+status],
        // companyId: this.searchParams.companyId,
        // orgId: this.searchParams.orgCode && this.searchParams.orgCode.at(-1),
        // categoryName:
        //   this.searchParams.categoryName &&
        //   this.searchParams.categoryName.replace("类", ""),
        // deviceNo: this.searchParams.deviceNo,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        maintenanceStatus: this.searchParams.maintenanceStatus,
      };
      if (this.searchParams.abnormalPhenomena && this.searchParams.abnormalPhenomena) {
        params.abnormalPhenomena = params.abnormalPhenomena.join(',');
      }
      if (status === "2") {
        params.maintainStatus = 0;
      }
      if (status === "3") {
        params.mQualityStatus = 0;
        params.maintenanceStatus = '2';
      }
      // if (status === "10") {
      //   params.orderStatus = [-1];
      // }

      this.loading = true;

      this.axios({
        method: "post",
        url: "/dms/moldMaintenanceHall/getPage",
        data: params,
      })
        .then((res) => {
          if (res.code === 200) {
            this.list = res.data.records;
            this.total = res.data.total;
          } else {
            this.list = [];
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    tabsBeforeLeave(activeName, oldActiveName) {
      return !this.loading;
    },
    onTabs(val) {
      this.searchParams.maintenanceStatus = val;
      this.pageNum = 1;
      this.getList();
      this.getCountsList();
    },
    loadingWarning() {
      this.$Message.warning(this.$t("message.pleaseWait"));
    },
  },
};
</script>

<style lang="scss" scoped>
.orderList {
  //background: #fff;

  .tabWrap {
    display: flex;
    border-bottom: 1px solid #dcdee2;
    position: relative;

    .loading-bg {
      background: transparent;
      width: calc(100% - 223px);
      height: 100%;
      z-index: 11;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .formWrap {
    ::v-deep .ivu-form-item {
      margin-bottom: 0;
    }
  }

  .wrap {
    display: flex;
    flex-wrap: wrap;

    .item {
      width: calc((100% - 64px) / 5);
      margin-top: 15px;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      position: relative;
      padding: 0 15px;
      line-height: 24px;
      height: 460px;
      margin-right: 16px;

      &:nth-child(5n + 5) {
        margin-right: 0;
      }

      .topR {
        position: absolute;
        right: 10px;
        top: 10px;
        min-width: 80px;
        height: 50px;

        img {
          width: 100%;
          height: auto;
          overflow: hidden;
        }
      }

      .name {
        position: relative;
        height: 65px;
        line-height: 20px;
        // margin-top: 10px;

        span {
          display: inline-block;
          /*height: 40px;*/
          /*line-height: 40px;*/
          padding: 0 3px;

          &:nth-child(1) {
            color: #333;
            font-family: "MicrosoftYaHei", "微软雅黑", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            /*line-height: 40px;*/
          }

          &:nth-child(2) {
            color: #666;
            font-family: "MicrosoftYaHei", "微软雅黑", sans-serif;
            font-size: 12px;
            /*line-height: 40px;*/
          }
        }

        .name-img {
          width: 69px;
          height: 15px;
          display: inline-block;
          margin-right: 25px;

          img {
            width: 100%;
            height: 100%;
            overflow: hidden;
          }
        }
      }

      .details {
        height: 325px;
        // padding-left: 10px;
        background-color: #f8fcff;
        margin-top: 12px;
        border-radius: 3%;
        position: relative;

        .formItem {
          display: flex;
          align-items: center;

          .label {
            width: 80px;
            font-family: "MicrosoftYaHei", "微软雅黑", sans-serif;
            font-weight: 400;
            font-style: normal;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 12px;
            color: #888888;
            line-height: 27px;
          }

          .value {
            width: calc(100% - 80px);
            color: #333;
            padding: 0 3px;
            font-family: "MicrosoftYaHei", "微软雅黑", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 12px;
          }

          .num {
            color: #187bdb;
            text-decoration: underline;
            cursor: pointer;
          }
        }

        .img {
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 36px;
        }

        .preview {
          position: absolute;
          right: 0;
          bottom: 62%;
          width: 40px;
          height: 40px;
          background: #eee;

          .preview-img {
            width: 40px;
            height: 40px;
            overflow: hidden;
          }
        }
      }

      .ivu-tag-blue {
        border-color: #f1f7fd;
        border-radius: 24px;
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #187bde !important;
      }

      .ivu-tag-volcano {
        border-color: #f1f7fd;
        border-radius: 24px;
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #187bde !important;
      }

      .ivu-tag-red {
        border-color: #f1f7fd;
        border-radius: 24px;
        color: #187bde !important;
      }

      ::v-deep .ivu-tag-blue .ivu-tag-text {
        color: #187bde !important;
        padding: 3px 3px;
      }

      ::v-deep .ivu-tag-red .ivu-tag-text {
        color: #e03e55 !important;
        padding: 3px 3px;
      }

      .btnF {
        line-height: 40px;
        position: absolute;
        bottom: 5px;
        right: 10px;

        button {
          margin-left: 5px;
          padding: 0 10px;
        }
      }
    }
  }

  .title {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;

    .icon {
      display: flex;

      .creatBtnright {
        display: flex;
        align-items: center;
        font-size: 16px;

        i {
          font-size: 36px;
        }
      }
    }
  }
}

.over-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

::v-deep .tab {
  background-color: #fff;
  height: 50px;
  padding: 10px 50px;
  flex: 1;

  .ivu-tabs-bar {
    padding-left: 30px;
    border-bottom: none;
  }

  .ivu-tabs-tab {
    height: 50px;
    line-height: 50px;
    padding: 0 16px;

    div {
      font-size: 16px;
    }
  }
}

.unreciver {
  position: relative;
  display: inline-block;
  width: 69px;
  height: 35px;
  margin-right: 10px;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
  border-radius: 5px;
  font-family: "Arial Normal", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  vertical-align: none;
  text-align: center;
  line-height: 35px;
  text-transform: none;

  img {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 23px;
    right: 1px;
  }
}

.black {
  color: #000;
  border-color: #333;
}

.blue {
  background: transparent !important;
  color: #2d8cf0 !important;
}

.red {
  width: calc(100% - 120px);
  color: red;
  padding: 0 3px;
  font-family: "MicrosoftYaHei", "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 30px;
}

.green {
  width: calc(100% - 120px);
  color: #31b404;
  padding: 0 3px;
  font-family: "MicrosoftYaHei", "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 30px;
}

.yellow {
  width: calc(100% - 120px);
  color: #ffbf00;
  padding: 0 3px;
  font-family: "MicrosoftYaHei", "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 30px;
}

.backupStatus {
  span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    vertical-align: inherit;
  }

  &.backupStatus1 {
    color: red !important;

    span {
      background: red;
    }
  }

  &.backupStatus2 {
    color: #dfdf3b !important;

    span {
      background: #dfdf3b;
    }
  }

  &.backupStatus3 {
    color: green !important;

    span {
      background: green;
    }
  }
}
</style>
<style lang="scss">
@media (max-width: 1600px) and (min-width: 1301px) {
  .orderList .wrap .item {
    width: calc((100% - 48px) / 4) !important;
    margin-right: 16px !important;

    &:nth-child(4n + 4) {
      margin-right: 0 !important;
    }
  }
}

@media (max-width: 1300px) and (min-width: 1000px) {
  .orderList .wrap .item {
    width: calc((100% - 32px) / 3) !important;
    margin-right: 16px !important;

    &:nth-child(3n + 3) {
      margin-right: 0 !important;
    }
  }
}
</style>
